<template>
  <div class="box">
    <div class="material-information">
      <el-form
        ref="ruleFormRef"
        style="padding: 2rem 5rem; display: flex; flex-wrap: wrap; justify-content: space-between; width: 80%"
        :model="ruleForm"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="物料名称" prop="materialName" class="materialinput">
          <el-input v-model="ruleForm.materialName" placeholder="请输入物料名称" />
        </el-form-item>
        <el-form-item label="物料编号" prop="materialId" class="materialinput">
          <el-input v-model="ruleForm.materialId" placeholder="请输入物料编号" />
        </el-form-item>
        <el-form-item label="物料类型" prop="materialType" class="materialselect" style="">
          <el-select v-model="ruleForm.materialType" placeholder="请选择物料类型">
            <el-option label="原材料" value="rawmaterials" />
            <el-option label="非原材料" value="norawmaterials" />
          </el-select>
        </el-form-item>
        <el-form-item label="物料状态" prop="materialStatus" class="materialselect" style="">
          <el-select v-model="ruleForm.materialStatus" placeholder="请选择物料状态">
            <el-option label="启用" value="0" />
            <el-option label="禁用" value="1" />
          </el-select>
        </el-form-item>
      </el-form>
      <div class="baseinfobtn">
        <div class="baseinfobtncenter">
          <div class="baseinfobtn-1" @click="materialSelect">查询</div>
          <div class="baseinfobtn-2" @click="materialReset">重置</div>
        </div>
      </div>
    </div>
    <div class="material-addinformation">
      <div class="baseinfobtn" style="float: right">
        <div class="baseinfobtncenter">
          <div class="baseinfobtn-1" @click="goadd">新增</div>
          <div class="baseinfobtn-2" @click="dialogFormVisible = true">导入</div>
        </div>
      </div>
      <div style="padding: 3rem">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          size="default"
          :header-cell-style="{ backgroundColor: '#F8F8F9', color: '#333', fontSize: '14px' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" label="序号" width="55" />
          <el-table-column label="物料编号">
            <template #default="scope">{{ scope.row.matnr }}</template>
          </el-table-column>
          <el-table-column label="物料名称">
            <template #default="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="物料状态" width="120">
            <template #default="scope">
              <div style="display: flex">
                <div :class="scope.row.material_state ? 'yuan' : 'yuanb'" />
                {{ scope.row.material_state ? '启用' : '禁用' }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="物料类型">
            <template #default="scope">{{ scope.row.mtart }}</template>
          </el-table-column>
          <el-table-column label="物料类型编号">
            <template #default="scope">{{ scope.row.typeid }}</template>
          </el-table-column>
          <el-table-column label="规格">
            <template #default="scope">{{ scope.row.attr }}</template>
          </el-table-column>
          <el-table-column label="基本计量单位">
            <template #default="scope">{{ scope.row.meins }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <div class="optionbtn">
                <div class="optionbtn-1" @click="goedit(scope.row.id)">编辑</div>
                <div class="optionbtn-2" @click="materialdel(scope.row.id)">删除</div>
                <div
                  :class="scope.row.material_state ? 'optionbtn-2' : 'optionbtn-1'"
                  @click="materialdisable(scope.row.id)"
                >
                  {{ scope.row.material_state ? '禁用' : '启用' }}
                </div>
                <el-popover placement="bottom" :width="200" trigger="hover">
                  <template #reference>
                    <el-icon size="20">
                      <MoreFilled />
                    </el-icon>
                  </template>
                  <div style="line-height: 40px">
                    <div class="seemap">查看图纸</div>
                    <div class="seemap">查看包装规格</div>
                  </div>
                </el-popover>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div style="float: right; margin: 20px 0">
          <el-pagination
            v-model:current-page="wuliaolist.currentPage"
            v-model:page-size="wuliaolist.pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="wuliaolist.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" title="物料导入" width="800">
      <div>
        <el-upload
          class="upload-demo"
          drag
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
        >
          <div class="el-upload__text">
            将文件拖到此处，或
            <span style="color: #578c43">点击上传</span>
          </div>
          <template #tip>
            <div class="el-upload__tip" style="text-align: center; margin-top: 10px">
              仅允许导入xls，xlsx格式文件。
              <span style="color: #578c43">下载模板</span>
            </div>
          </template>
        </el-upload>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="default" type="primary" style="background-color: #578c43" @click="dialogFormVisible = false">
            确认
          </el-button>
          <el-button size="default" @click="dialogFormVisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { Action, ComponentSize, FormInstance, FormRules, TableColumnCtx, TableInstance } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { materialSelectlist, materialdelete, materialdisables, materialimports } from '@/api/material'
import { useRoute, useRouter } from 'vue-router'

// 物料列表分页
interface Wuliaolist {
  currentPage: number
  pageSize: number
  total: number
  materialName: string
  materialNumber: string
  materialType: string
  materialStatus: string
}
const wuliaolist = ref<Wuliaolist>({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  materialName: '',
  materialNumber: '',
  materialType: '',
  materialStatus: ''
})
const size = ref<ComponentSize>('default')
const background = ref(true)
const disabled = ref(false)
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  wuliaolist.value.pageSize = val
  getwuliaolist()
}
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`)
  wuliaolist.value.currentPage = val
  getwuliaolist()
}

onMounted(() => {
  getwuliaolist()
})

const getwuliaolist = () => {
  materialSelectlist(wuliaolist.value).then((data) => {
    tableData.value = data.data.records
    wuliaolist.value.total = data.data.total
  })
}

const router = useRouter()
const route = useRoute()

interface RuleForm {
  materialName: string
  materialId: string
  materialType: string
  materialStatus: string
}
// 查询条件
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
  materialName: '',
  materialId: '',
  materialType: '',
  materialStatus: ''
})

// 物料查询
const materialSelect = () => {
  const data = {
    materialName: ruleForm.value.materialName,
    matnr: ruleForm.value.materialId,
    mtart: ruleForm.value.materialType,
    pstat: ruleForm.value.materialStatus
  }
  materialSelectlist(data)
    .then((data) => {})
    .catch((err) => {})
}
// 物料重置
const materialReset = () => {
  ruleForm.value = {
    materialName: '',
    materialId: '',
    materialType: '',
    materialStatus: ''
  }
  materialSelect()
}
// 物料添加
const goadd = () => {
  router.push({
    name: 'copy',
    query: {}
  })
}
// 物料编辑
const goedit = (ids: string) => {
  router.push({
    name: 'copy',
    query: { id: ids }
  })
}
// 物料删除
const materialdel = (ids: string) => {
  ElMessageBox.confirm('你是否要删除掉这条数据?', '删除', {
    distinguishCancelAndClose: true,
    confirmButtonText: '删除',
    cancelButtonText: '取消',
    confirmButtonClass: 'propfirmbtn'
  })
    .then(() => {
      const data = {
        id: ids.toString()
      }
      materialdelete(data)
        .then((data) => {
          getwuliaolist()
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
        })
        .catch((err) => {
          ElMessage({
            type: 'error',
            message: err
          })
        })
    })
    .catch((action: Action) => {
      ElMessage({
        type: 'info',
        message: action === 'cancel' ? '取消删除' : 'Stay in the current route'
      })
    })
}
// 物料禁用
const materialdisable = (ids: string) => {
  const data = {
    materialId: ids
  }
  materialdisables(data)
    .then((data) => {
      getwuliaolist()
      ElMessage({
        type: 'success',
        message: '禁用成功'
      })
    })
    .catch((err) => {
      ElMessage({
        type: 'error',
        message: err
      })
    })
}

interface User {
  matnr: string
  name: string
  material_state: number
  mtart: string
  typeid: string
  attr: string
  meins: string
}
const tableData = ref<User[]>([])

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])

const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
const dialogFormVisible = ref(false)
</script>

<style lang="scss" scoped>
.box {
  background: #f8f8f8;
  width: 100%;
  height: 89vh;
  box-sizing: border-box;
  padding: 15px 0;
}

.material-information {
  width: 98%;
  margin: 0px auto;
  background: #fff;
  border-radius: 10px;
  max-height: 350px;
  box-sizing: border-box;
  display: flex;
}

.demo-ruleForm::after {
  content: '';
  width: 30%;
  height: 50px;
  /* background-color: #eeeeee; */
}

.materialinput {
  width: 30%;
}

.materialselect {
  width: 25%;
  margin-right: 5%;
}

.baseinfobtn {
  width: 20%;
  display: flex;
  flex-wrap: wrap;
}

.baseinfobtncenter {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}

.baseinfobtn-1 {
  background: #578c43;
  color: #fff;
  text-align: center;
  padding: 0 20px;
  height: 34px;
  line-height: 32px;
  border-radius: 10px;
  margin-right: 20px;
  cursor: pointer;
}

.baseinfobtn-2 {
  background: #fff;
  color: #333;
  text-align: center;
  padding: 0 20px;
  height: 34px;
  line-height: 32px;
  border-radius: 10px;
  border: 1px solid #eee;
  cursor: pointer;
}

.material-addinformation {
  width: 98%;
  margin: 0px auto;
  background: #fff;
  border-radius: 10px;
  max-height: 70vh;
  box-sizing: border-box;
  margin-top: 20px;
  padding: 3rem 0rem;
}

.optionbtn {
  display: flex;
  flex-wrap: wrap;
}

.optionbtn-1 {
  color: #578c43;
  cursor: pointer;
  margin-right: 10px;
}

.optionbtn-2 {
  color: #f56c6c;
  cursor: pointer;
  margin-right: 10px;
}

.yuan {
  background: #578c43;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: auto 10px;
}

.yuanb {
  background: red;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: auto 10px;
}

::v-deep .el-pagination.is-background .el-pager li.is-active {
  background-color: #578c43;
}

::v-deep .el-pager li:hover {
  color: #578c43;
}

::v-deep .el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px #578c43 inset !important;
}

::v-deep .el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px #578c43 inset !important;
}

.seemap {
  cursor: pointer;
  box-sizing: border-box;
  padding-left: 10px;
}

.seemap:hover {
  background-color: #eee;
}
</style>
